<template>
	<div class='index'>
        <myNavbar title="消息"></myNavbar>
		<div class="message_item_box">
			<div class="message_item" @click="toOrder">
				<div class="message_item_img">
					<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/message-order.png" style="height: 70px;width: 70px;"></image>
				</div>
				<div class="message_item_content">
					<div class="message_item_tittle_box">
						<div class="tittle_content"><text class="message_item_tittle">订单消息</text>
							<div class="circular" v-if="orderCount!=''"></div>
						</div>
						<text class="message_item_time">{{messageOrder.sendDate}}</text>
					</div>
					<div class="item_info_content">
						<div><text v-if="messageOrder.msgContent.title" class="meeage_item_info">{{messageOrder.msgContent.title}}</text><text
							 class="meeage_item_info" v-if="!messageOrder.msgContent.title">暂无消息</text></div>
						<div class="item_info_number totalColor" v-if="orderCount!=''"><text class="item_info_number_title">{{orderCount}}</text></div>
					</div>
				</div>
			</div>
			<div class="message_item" @click="toLogistics">
				<div class="message_item_img">
					<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/message-logistics.png" style="height: 70px;width: 70px;"></image>
				</div>
				<div class="message_item_content">
					<div class="message_item_tittle_box">
						<div class="tittle_content"><text class="message_item_tittle">物流信息</text>
							<div class="circular" v-if="logisticsCount!=''"></div>
						</div>
						<text class="message_item_time">{{logistic.sendDate}}</text>
					</div>
					<div class="item_info_content">
						<div><text class="meeage_item_info" v-if="logistic.msgContent.title">{{logistic.msgContent.title}}</text>
							<text class="meeage_item_info" v-if="!logistic.msgContent.title">{{logistic.msgContent.title}}</text></div>
						<div class="item_info_number totalColor" v-if="logisticsCount!=''"><text class="item_info_number_title">{{logisticsCount}}</text></div>
					</div>
				</div>
			</div>
			<div class="message_item" @click="toAccount">
				<div class="message_item_img">
					<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/wallet-income.png" style="height: 70px;width: 70px;"></image>
				</div>
				<div class="message_item_content">
					<div class="message_item_tittle_box">
						<div class="tittle_content"><text class="message_item_tittle">账户消息</text>
							<div class="circular" v-if="accountCount!=''"></div>
						</div>
						<text class="message_item_time">{{account.sendDate}}</text>
					</div>
					<div class="item_info_content">
						<div><text class="meeage_item_info" v-if="account.msgContent.title">{{account.msgContent.title}}</text>
							<text class="meeage_item_info" v-if="!account.msgContent.title">暂无消息</text></div>
						<div class="item_info_number totalColor" v-if="accountCount!=''"><text class="item_info_number_title">{{accountCount}}</text></div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	import {
		list,
		markAsRead,
		unReadCount,
		conversation
	} from "../../../api/msgPush.js"
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		name: 'index',
		data() {
			return {
				messageOrder: {msgContent:{}},
				logistic: {msgContent:{}},
				customer: {msgContent:{}},
				admin: {msgContent:{}},
				account: {msgContent:{}},
				messages: [],
				unReads: [],
				orderCount: '',
				logisticsCount: '',
				customerCount: '',
				accountCount: '',
				adminCount: ''
			}
		},
		created() { // 在实例创建完成后被立即调用
            if (this.getGlobalData().token == null){
                eeui.openPage({url: 'root://pages/login/msgLogin.js',statusBarType: 'immersion',statusBarStyle:false},
                    (result) => {
                    }
                );
            }
            this.summaryClick()
			this.loadMessage()
		},
        components:{
		  myNavbar
        },
		methods: {
			toOrder(){
			    var _this = this
				const eeui = app.requireModule('eeui');
				eeui.openPage({url: 'root://pages/member/message/messageOrder/messageOrder.js',statusBarType: 'immersion',statusBarStyle:false},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.summaryClick()
                        }
					}
				);
			},
			toLogistics(){
			     var _this = this
				const eeui = app.requireModule('eeui');
				eeui.openPage({url: 'root://pages/member/message/logistics/logistics.js',statusBarType: 'immersion',statusBarStyle:false},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.summaryClick()
                        }
					}
				);
			},
			toAccount(){
			    var _this = this
				const eeui = app.requireModule('eeui');
				eeui.openPage({url: 'root://pages/member/message/account/account.js',statusBarType: 'immersion',statusBarStyle:false},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.summaryClick()
                        }
					}
				);
			},
            summaryClick() {
                this.orderCount = '';
                this.logisticsCount = '';
                this.accountCount = '';
                this.customerCount = '';
                this.adminCount = ''
                unReadCount().then(
                    res => {
                        console.log('消息统计')
                        console.log(res)
                        this.unReads = res.data
                        if (res.data.length > 0) {
                            this.unReads.forEach(item => {
                                switch (item.msg_key) {
                                    case 'msg-order':
                                        this.orderCount = item.msg_num
                                        break;
                                    case 'msg-shipping':
                                        this.logisticsCount = item.msg_num
                                        break;
                                    case 'msg-account':
                                        this.accountCount = item.msg_num
                                        break;
                                    case 'msg-service':
                                        this.customerCount = item.msg_num
                                        break;
                                    case 'msg-notify':
                                        this.adminCount = item.msg_num
                                        break;
                                }
                            })
                        } else {
                            this.orderCount = '';
                            this.logisticsCount = '';
                            this.accountCount = '';
                            this.customerCount = '';
                            this.adminCount = ''
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
			//每种消息的最后一条
			loadMessage() {
				conversation({
					 mchId: this.getGlobalData().mchId
				}).then(res => {
					res.data.forEach(item => {
						item.sendDate=this.formatTime(item.sendDate)
						item.msgContent =  JSON.parse(item.msgContent)
						if (item.msgKey == 'msg-order') {
							this.messageOrder = item
						} else if (item.msgKey == 'msg-shipping') {
							this.logistic = item
						} else if (item.msgKey == 'msg-account') {
							this.account = item
						} else if (item.msgKey == 'msg-service') {
							this.customer = item
						} else if (item.msgKey == 'msg-notify') {
							this.admin = item
						}
					})
				})
			},
		},
	}
</script>

<style scoped>
	.index{
		background-color: rgb(248,248,248);
	}
	.navbar {
		width: 750px;
		height: 100px;

	}
	.message_content {
		display: flex;
		margin-top: 20px;
		padding-right: 30px;
		padding-left: 30px;
		flex-direction: column;
	}

	.circular {
		width: 10px;
		height: 10px;
		background-color: rgba(231, 91, 83, 1);
		border-radius: 50%;
		margin-left: 16px;
		margin-top: 10px;
        border-color: rgba(231, 91, 83, 1);
        border-width: 2px;
        border-style: solid;
	}


	.message_head {
		margin-left: 5px;
		width: 682px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.message_tittle {
		height: 33prx;
		font-size: 34px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
		margin-left: 95px;
	}

	.message_all {
		height: 28px;
		font-size: 30px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	}

	.tittle_content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.message_item_box {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 20px;
	}

	.message_item {
		width: 702px;
		height: 146px;
		align-items: center;
		background-color: white;
		border-radius: 16px;
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}

	.message_item_img {
		height: 70px;
		width: 70px;
		margin-left: 27px;
	}

	.message_item_tittle {

		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	}

	.message_item_tittle_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 557px;
		margin-bottom: 22px;
	}

	.message_item_content {
		margin-left: 23px;
	}

	.meeage_item_info {
		width: 390px;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.message_item_time {

		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 0.3);
	}

	.item_info_content {
		display: flex;
		flex-direction: row;
		width: 557px;
		justify-content: space-between;
	}

	.item_info_number {
		width: 32px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 32px;
		/* background: rgba(231,91,83,1); */
		/* border: 2px solid rgba(213, 70, 51, 1); */
		border-radius: 50%;
	}
    /* 小圆点 */
    .totalColor{
        background-color: #fc5157
    }
    .item_info_number_title{
        font-size: 18px;
        color: rgba(255, 255, 255, 1);
    }
</style>
